<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <title>Building blocks demo</title>
  <!-- Building blocks -->
  <link rel="stylesheet" href="style/action_menu.css">
  <link rel="stylesheet" href="style/buttons.css">
  <link rel="stylesheet" href="style/confirm.css">
  <link rel="stylesheet" href="style/edit_mode.css">
  <link rel="stylesheet" href="style/headers.css">
  <link rel="stylesheet" href="style/input_areas.css">
  <link rel="stylesheet" href="style/status.css">
  <link rel="stylesheet" href="style/switches.css">
  <link rel="stylesheet" href="style_unstable/drawer.css">
  <link rel="stylesheet" href="style_unstable/lists.css">
  <link rel="stylesheet" href="style_unstable/progress_activity.css">
  <link rel="stylesheet" href="style_unstable/scrolling.css">
  <link rel="stylesheet" href="style_unstable/seekbars.css">
  <link rel="stylesheet" href="style_unstable/tabs.css">
  <link rel="stylesheet" href="style_unstable/toolbars.css">

  <!-- Icons -->
  <link rel="stylesheet" href="icons/styles/action_icons.css">
  <link rel="stylesheet" href="icons/styles/media_icons.css">
  <link rel="stylesheet" href="icons/styles/comms_icons.css">
  <link rel="stylesheet" href="icons/styles/settings_icons.css">

  <!-- Transitions -->
  <link rel="stylesheet" href="transitions.css">
  
  <!-- Util CSS: some extra tricks -->
  <link rel="stylesheet" href="util.css">
  <link rel="stylesheet" href="fonts.css">

  <!-- Additional markup to make Building Blocks kind of cross browser -->
  <link rel="stylesheet" href="cross_browser.css">

  <style>
    #index {
      height: 100%;
    }
    [data-position="right"] {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transform: translateX(100%);
      -webkit-transform: translateX(100%);
      z-index: 15;
      z-index: 100; /* -> drawer */
    }
    section[role="region"][data-position="right"] {
      position: absolute;
    }
    [data-position="right"].current {
      animation: rightToCurrent 0.4s forwards;
      -webkit-animation: rightToCurrent 0.4s forwards;
    }
    [data-position="right"].right {
      animation: currentToRight 0.4s forwards;
      -webkit-animation: currentToRight 0.4s forwards;
    }
    [data-position="current"].left {
      animation: currentToLeft 0.4s forwards;
      -webkit-animation: currentToLeft 0.4s forwards;
    }
    [data-position="current"].current {
      animation: leftToCurrent 0.4s forwards;
      -webkit-animation: leftToCurrent 0.4s forwards;
    }
    [data-position="back"] {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      opacity: 0;
      /* z-index: 100; -> drawer */
    }
    [data-position="back"].fade-in {
      z-index: 120;
      animation: fadeIn 0.2s forwards;
      -webkit-animation: fadeIn 0.2s forwards;
    }
    [data-position="back"].fade-out {
      animation: fadeOut 0.2s forwards;
      -webkit-animation: fadeOut 0.2s forwards;
    }

    [data-position="edit-mode"] {
      position: absolute;
      top: -5rem;
      left: 0;
      right: 0;
      bottom: -7rem;
      z-index: -1;
      opacity: 0;
      transition: all 0.3s ease;
    }
    [data-position="edit-mode"].edit {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 120;
      opacity: 1;
    }

    /* Headers */
    #headers section[role="region"] {
      margin-bottom: 1.5rem;
    }
    #headers section[role="region"]:not(#drawer) {
      display: inline;
    }
    #headers article header:first-child {
      margin-top: 1.5rem;
    }
    #headers section[role="region"] header h2 {
      margin: 0 0 1.5rem 0;
    }

    /* Lists */
    /* to avoid double background effect on press */
    [data-type=list] li>a:active { 
      background-color: transparent;
    }

    /* Drawer */
    section[role="region"]:not(#drawer) {
      transition: none;
      left: 0;
      z-index: 0;
      padding-left: 0;
    }
    section[data-type="sidebar"] + section[role="region"] > header:first-child > button, 
    section[data-type="sidebar"] + section[role="region"] > header:first-child > a {
      background-position: 3.5rem center;
    }

    /* Switches */
    #switches label:last-child {
      margin-left: 2rem;  
    }

    /* Scrolling */
    nav[data-type="scrollbar"] {
      padding-top: 1rem;
    }
    nav[data-type="scrollbar"] p {
      opacity: 1;
    }

    /* Seek bars */
    div[role="slider"] > label.icon {
      background: no-repeat right top;
      background-size: 3rem auto;
    }
    
    /* Tabs */
    #tabs .content {
      padding: 0;
    }
    #tabs .content .content {
      padding: 1.5rem 3rem;
    }

    /* Filters */
    [role="tablist"][data-type="filter"] {
      margin-bottom: 2rem;
    }

    .bottom[role="tablist"][data-type="filter"] {
      bottom: auto;
    }

    /* Device rotation */
    .landscape section[role="region"]#drawer > header:first-child {
      /* Whatever needs to be changed on landscape */
    }
  </style>
</head>
<body>
  <section id="index" data-position="current">
    <section data-type="sidebar">
      <header>
        <menu type="toolbar">
          <a href="#">Done</a>
        </menu>
        <h1>Drawer demo</h1>
      </header>
      <nav>
        <ul>
          <li><a href="#">item 1</a></li>
          <li><a href="#">item 2</a></li>
          <li><a href="#">item 3</a></li>
        </ul>
      </nav>
    </section>

    <section id="drawer" role="region">
      <header class="fixed">
        <a href="#"><span class="icon icon-menu">hide sidebar</span></a>
        <a href="#drawer"><span class="icon icon-menu">show sidebar</span></a>
        <h1>Building Blocks <em>demo</em></h1>
      </header>
      <article class="content scrollable header">
        <div data-type="list">
		<ul>
          <li><a href="#">Iniciar y guardar un juego</a></li>
          <li><a href="#">Cambiar las opciones del juego</a></li>
          <li><a href="#">Personalizar la apariencia del juego</a></li>
        </ul>
      </article>
    </section> <!-- end drawer -->
  </section> <!-- end index -->

  <!--·························· Action menu ··························-->
  <section id="action-menu" data-position="back" class="fullscreen">
    <form role="dialog" data-type="action">
      <header> Title </header> <!-- this header is optional -->
      <menu>
        <button> Action 1 </button>
        <button> Action 3 </button>
        <button> Cancel </button>
      </menu>
    </form>
  </section>

  <!--···························· Buttons ····························-->
  <section role="region" id="buttons" data-position="right">
    <header class="fixed">
      <a id="btn-buttons-back" href="#"><span class="icon icon-back">back</span></a>
      <h1>Buttons</h1>
    </header>

    <article class="content scrollable header">
      <header><h2>Normal</h2></header>
      <div>
        <button>Default</button>
        <button class="recommend">Recommend</button>
        <button class="danger">Danger</button>
       </div>

      <header><h2>Disabled</h2></header>
      <div>
        <button disabled>Default</button>
        <a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a>
        <button disabled class="danger">Danger</button>
      </div>

      <header><h2>Disabled with dark background</h2></header>
      <div>
        <button disabled>Default</button>
        <a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a>
        <button disabled class="danger">Danger</button>
      </div>

      <header><h2>Button List</h2></header>
      <div>
        <ul>
          <li>
            <button>Default</button>
          </li>
          <li>
            <button disabled="disabled">Disabled</button>
          </li>
          <li>
            <button class="icon icon-view">
              View Name
            </button>
          </li>
          <li>
            <button disabled="disabled" class="icon icon-view">
              View Name
            </button>
          </li>
          <li>
            <a role="button" class="icon icon-dialog">
              Tuesday September 18, 2012
            </a>
          </li>
          <li>
            <a role="button" aria-disabled="true" class="icon icon-dialog">
              Tuesday September 18, 2012
            </a>
          </li>
        </ul>
      </div>

      <header><h2>Button List (compact mode)</h2></header>
      <div>
        <ul class="compact">
          <li>
            <label>Description</label>
            <button class="icon icon-dialog">Action 1</button>
          </li>
          <li>
            <label>Description</label>
            <button class="icon icon-dialog">Action 2</button>
          </li>
          <li>
            <label>This is a large description for this action</label>
            <button class="icon icon-dialog" disabled >Action 3 (disabled)</button>
          </li>
        </ul>
      </div>
    </article>
  </section>

  <!--·························· Action menu ··························-->
  <section id="confirm" data-position="back" class="fullscreen">
    <form role="dialog" data-type="confirm">
      <section>
        <h1>Confirmation</h1>
        <p>Are you sure you want to delete this contact?</p>
      </section>
      <menu>
        <button>Cancel</button>
        <button class="danger">Delete</button>
      </menu>
    </form>
  </section>

  <!--·························· Edit mode ··························-->
  <section id="edit-mode" data-position="edit-mode">
    <form role="dialog" data-type="edit">
    <section>
      <header>
        <button><span class="icon icon-close">close</span></button>
        <menu type="toolbar">
          <button>done</button>
        </menu>
        <h1>Edit</h1>
      </header>
    </section>
    <menu>
      <button>Delete all</button>
      <button>Delete selected</button>
    </menu>
  </form>
  </section>

  <!--··························· Headers ···························-->
  <section role="region" id="headers" data-position="right">
    <header class="fixed">
      <a id="btn-headers-back" href="#"><span class="icon icon-back">back</span></a>
      <h1>Headers</h1>
    </header>
    <article class="content scrollable header">
      <section role="region">
        <header>
          <menu type="toolbar">
            <a href="#"><span class="icon icon-edit">edit</span></a>
            <a href="#"><span class="icon icon-add">add</span></a>
          </menu>
          <h1>Messages</h1>
        </header>
      </section>

      <section role="region">
        <header>
          <a href="#"><span class="icon icon-back">back</span></a>
          <menu type="toolbar">
            <button><span class="icon icon-edit">edit</span></button>
          </menu>
          <h1>Mark Alfenito</h1>
        </header>
      </section>

      <section role="region">
        <header>
          <button><span class="icon icon-menu">menu</span></button>
          <menu type="toolbar">
            <button><span class="icon icon-edit">edit</span></button>
            <button><span class="icon icon-add">add</span></button>
          </menu>
          <h1>Inbox <em>(2)</em></h1>
        </header>
      </section>

      <section role="region">
        <header>
          <button><span class="icon icon-close">close</span></button>
          <menu type="toolbar">
            <button>done</button>
          </menu>
          <h1>Title</h1>
        </header>
        <header>
          <h2>Subheader text</h2>
        </header>
      </section>

      <section role="region">
        <header>
          <button><span class="icon icon-back">back</span></button>
          <menu type="toolbar">
            <button><span class="icon icon-user">user</span></button>
          </menu>
          <form action="#">
            <input type="text" placeholder="search" required="required">
            <button type="reset">Remove text</button>
          </form>
        </header>
      </section>

      <section role="region" class="skin-dark">
        <header>
          <a href="#"><span class="icon icon-back">back</span></a>
          <h1>Song title</h1>
        </header>
        <header>
          <h2>Subheader text</h2>
        </header>
      </section>

      <section role="region" class="skin-dark">
        <header>
          <h1>Song title</h1>
        </header>
      </section>

      <section role="region" class="skin-organic">
        <header>
          <a href="#"><span class="icon icon-back">back</span></a>
          <h1>Settings</h1>
        </header>
        <header>
          <h2>Subheader text</h2>
        </header>
      </section>

      <div class="skin-organic">
        <section role="region">
          <header>
            <h1>Settings</h1>
          </header>
          <header>
            <h2>Subheader text</h2>
          </header>
        </section>

        <section role="region">
          <header>
            <a href="#"><span class="icon icon-close">close</span></a>
            <h1>Settings</h1>
          </header>
          <header>
            <h2>Subheader text</h2>
          </header>
        </section>
      </div>
    </article>
  </section>

  <!--·························· Input areas ··························-->
  <section role="region" id="input-areas" data-position="right">
    <header class="fixed">
      <a id="btn-input-areas-back" href="#"><span class="icon icon-back">back</span></a>
      <h1>Input areas</h1>
    </header>
    <article class="content scrollable header">
      <header><h2>Default inputs</h2></header>
      <form>
        <p>
          <input type="text" placeholder="Placeholder" required>
          <button type="reset">Clear</button>
        </p>

        <p>
          <textarea placeholder="Placeholder in textarea" required></textarea>
        </p>

        <p>
          <input type="text" placeholder="Placeholder" value="Some written text" required>
          <button type="reset">Clear</button>
        </p>
      </form>

      <header><h2>Fieldset</h2></header>
       <form>
        <fieldset>
          <legend class="action">Mobile</legend>
          <section>
            <p>
              <input type="tel" placeholder="Phone number" required>
              <button type="reset">Clear</button>
            </p>
            <p>
              <input type="text" placeholder="Name" value="Jessy James" required>
              <button type="reset">Clear</button>
            </p>
          </section>
        </fieldset>

        <fieldset>
          <legend>Work</legend>
          <section>
            <p>
              <input type="tel" placeholder="Email" required>
              <button type="reset">Clear</button>
            </p>
          </section>
        </fieldset>
       </form>

      <header><h2>Forms: Input text</h2></header>

      <form role="search">
        <p>
          <input type="text" placeholder="Search..." required>
          <button type="reset">Clear</button>
        </p>
      </form>

      <form role="search">
        <button type="submit">Cancel</button>
        <p>
          <input type="text" placeholder="Search..." required value="Some text here">
          <button type="reset">Clear</button>
        </p>
      </form>

      <form role="search" class="skin-dark">
        <p>
          <input type="text" placeholder="Search..." required>
          <button type="reset">Clear</button>
        </p>
      </form>

      <form role="search" class="skin-dark">
        <button type="submit">Cancel</button>
        <p>
          <input type="text" placeholder="Search..." required value="Some text here">
          <button type="reset">Clear</button>
        </p>
      </form>

      <header><h2>Forms: Text area</h2></header>

      <form role="search" class="bottom">
        <!-- this button should be enabled after start typing in the input field-->
        <button type="submit" disabled>Send</button>
        <p>
          <textarea required></textarea>
        </p>
      </form>

      <form role="search" class="bottom">
        <button class="icon icon-attachment">Attachment</button>
        <button type="submit">Send</button>
        <p>
          <textarea required>Some text here</textarea>
        </p>
      </form> 
    </article>
  </section>

  <!--····························· Switches ·····························-->
  <section role="region" id="switches" data-position="right">
    <header class="fixed">
      <a id="btn-switches-back" href="#"><span class="icon icon-back">back</span></a>
      <h1>Switches</h1>
    </header>
    <article class="content scrollable header">
      <header><h2>Checkbox, commonly used in edit mode</h2></header>
      <label class="pack-checkbox">
        <input type="checkbox" checked>
        <span></span>
      </label>

      <label class="pack-checkbox">
        <input type="checkbox">
        <span></span>
      </label>

      <label class="pack-checkbox danger">
        <input type="checkbox" checked>
        <span></span>
      </label>

      <label class="pack-checkbox danger">
        <input type="checkbox">
        <span></span>
      </label>

      <header><h2>Radio, commonly used in settings</h2></header>
      <label class="pack-radio">
        <input type="radio" name="example" checked>
        <span></span>
      </label>

      <label class="pack-radio">
        <input type="radio" name="example">
        <span></span>
      </label>

      <label class="pack-radio danger">
        <input type="radio" name="example2" checked>
        <span></span>
      </label>

      <label class="pack-radio danger">
        <input type="radio" name="example2">
        <span></span>
      </label>

      <header><h2>Switch, commonly used in settings</h2></header>
      <label class="pack-switch">
        <input type="checkbox" checked>
        <span></span>
      </label>
      
      <label class="pack-switch">
        <input type="checkbox">
        <span></span>
      </label>
    </article>
  </section>

  <!--····························· Lists ·····························-->
  <section role="region" id="lists" data-position="right">
    <header class="fixed">
      <a id="btn-lists-back" href="#"><span class="icon icon-back">back</span></a>
      <h1>Lists</h1>
    </header>
    <article class="content scrollable header">
      <section data-type="list">
        <header>Title</header>
        <ul>
          <li>
            <p>Travis Gray</p>
          </li>
          <li>
            <a href="#">
              <p>Travis Gray</p>
              <p>Clickable item</p>
            </a>
          </li>
          <li>
            <aside class="pack-end">
              <img alt="photo" src="images/photo.jpg">
            </aside>
            <a href="#">
              <p>Travis Gray</p>
              <p>Beginning of message</p>
            </a>
          </li>
        </ul>
        <header>Another title</header>
        <ul>
          <li aria-disabled="true">
            <aside class="pack-end">
              <img alt="photo" src="images/photo.jpg">
            </aside>
            <a href="#">
              <p>Travis Gray</p>
              <p>Disabled item</p>
            </a>
          </li>
          <li>
            <a href="#">
              <aside class="icon comms-icon calllog-incomingcall">
                asidecall
              </aside>
              <p>Travis Gray <em>(2)</em></p>
              <p>
                <time datetime="17:43">5:43PM</time>
                Mobile
              </p>
            </a>
          </li>
        </ul>
      </section>
    </article>
  </section>

  <!--···························· Progress ····························-->
  <section role="region" id="progress" data-position="right">
    <header class="fixed">
      <a id="btn-progress-back" href="#"><span class="icon icon-back">back</span></a>
      <h1>Progress and activity</h1>
    </header>
    <article class="content scrollable header">
      <header><h2>Spinner</h2></header>
      <progress></progress>

      <header><h2>Activity bar</h2></header>
      <progress class="pack-activity" value="0" max="100"></progress>

      <header><h2>Progress bar</h2></header>
      <progress value="80" max="100"></progress>

      <header><h2>Progress + activity bar</h2></header>
      <progress class="pack-activity" value="80" max="100"></progress>

      <header><h2>Light progress + activity bar</h2></header>
      <progress class="pack-activity light" value="0" max="100"></progress>
    </article>
  </section>

  <!--···························· Scrolling ····························-->
  <section role="region" id="scrolling" data-position="right">
    <header class="fixed">
      <a id="btn-scrolling-back" href="#"><span class="icon icon-back">back</span></a>
      <h1>Scrolling</h1>
    </header>
    <article class="content scrollable header">
      <nav data-type="scrollbar">
        <p>A</p>
        <ol>
          <li><a href="#"><span class="pack-icon-search">Search</span></a></li>
          <li><a href="#"><span class="pack-icon-favorites">favorites</span></a></li>
          <li><a href="#">A</a></li>
          <li><a href="#">B</a></li>
          <li><a href="#">C</a></li>
          <li><a href="#">D</a></li>
          <li><a href="#">E</a></li>
          <li><a href="#">F</a></li>
          <li><a href="#">G</a></li>
          <li><a href="#">H</a></li>
          <li><a href="#">I</a></li>
          <li><a href="#">J</a></li>
          <li><a href="#">K</a></li>
          <li><a href="#">L</a></li>
          <li><a href="#">M</a></li>
          <li><a href="#">N</a></li>
          <li><a href="#">O</a></li>
          <li><a href="#">P</a></li>
          <li><a href="#">Q</a></li>
          <li><a href="#">R</a></li>
          <li><a href="#">S</a></li>
          <li><a href="#">T</a></li>
          <li><a href="#">U</a></li>
          <li><a href="#">V</a></li>
          <li><a href="#">W</a></li>
          <li><a href="#">X</a></li>
          <li><a href="#">Y</a></li>
          <li><a href="#">Z</a></li>
          <li><a href="#">#</a></li>
        </ol>
      </nav>
    </article>
  </section>

  <!--···························· Seek bars ····························-->
  <section role="region" id="seek-bars" data-position="right">
    <section role="region">
      <header class="fixed">
        <a id="btn-seek-bars-back" href="#"><span class="icon icon-back">back</span></a>
        <h1>Seek bars</h1>
      </header>
      <article class="content scrollable header">
        <header><h2>Default seeker</h2></header>
        <div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
          <div>
            <progress value="80" max="100"></progress>
            <button>handler</button>
          </div>
        </div>

        <header><h2>Value seeker</h2></header>
        <div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
          <label>0</label>
          <label>100</label>
          <div>
            <progress value="80" max="100"></progress>
            <button>handler</button>
          </div>
        </div>

        <header><h2>Icon seeker</h2></header>
        <div role="slider" aria-valuemin="0" aria-valuenow="10" aria-valuemax="100" aria-valuetext="slider description">
          <label class="icon settings-icon lower-brightness">0</label>
          <label class="icon settings-icon brightness">100</label>
          <div>
            <progress value="10" max="100"></progress>
            <button>handler</button>
          </div>
        </div>
      </article>
    </section>
  </section>

  <!--······························ Tabs ······························-->
  <section id="tabs" data-position="right">
    <section role="region">
      <header class="fixed">
        <a id="btn-tabs-back" href="#"><span class="icon icon-back">back</span></a>
        <h1>Tabs</h1>
      </header>
      <article class="content scrollable header">
        <ul role="tablist" data-items="4" class="bottom">
          <li id="panel2" role="tab">
            <a href="#" class="icon comms-icon dailer-recentcalls">comms</a>
            <div role="tabpanel"></div>
          </li>
          <li id="panel2" role="tab">
            <a href="#" class="icon comms-icon dailer-contacts">contacts</a>
            <div role="tabpanel"></div>
          </li>
          <li id="panel3" role="tab" aria-disabled="true">
            <a class="icon comms-icon dailer-dialpad">dialer</a>
            <div role="tabpanel"></div>
          </li>
          <li id="panel4" role="tab">
            <a href="#">Tab name</a>
            <div role="tabpanel"></div>
          </li>
        </ul>
      </article>
    </section>
  </section>

  <!--····························· Filters ·····························-->
  <section id="filters" data-position="right">
     <section role="region">
      <header class="fixed">
        <a id="btn-filters-back" href="#"><span class="icon icon-back">back</span></a>
        <h1>Filters</h1>
      </header>
      <article class="content scrollable header">
        <header><h2>Default position</h2></header>
        <ul role="tablist" data-type="filter" data-items="2">
          <li id="filter1-1" role="tab"><a href="#">Action 01</a></li>
          <li id="filter1-2" role="tab"><a href="#">Action 02</a></li>
        </ul>
        <ul role="tablist" data-type="filter" data-items="3">
          <li id="filter2-1" role="tab"><a href="#">Action 01</a></li>
          <li id="filter2-2" role="tab"><a href="#">Action 02</a></li>
          <li id="filter2-3" role="tab"><a href="#">Action 02</a></li>
        </ul>
        <ul role="tablist" data-type="filter" data-items="4">
          <li id="filter3-1" role="tab"><a href="#">Action 01</a></li>
          <li id="filter3-2" role="tab"><a href="#">Action 02</a></li>
          <li id="filter3-3" role="tab"><a href="#">Action 03</a></li>
          <li id="filter3-4" role="tab"><a href="#">Action 04</a></li>
        </ul>
        <header><h2>Bottom position</h2></header>
        <ul role="tablist" data-type="filter" class="bottom" data-items="4">
          <li id="filter4-1" role="tab"><a href="#">Action 01</a></li>
          <li id="filter4-2" role="tab"><a href="#">Action 02</a></li>
          <li id="filter4-3" role="tab"><a href="#">Action 03</a></li>
          <li id="filter4-4" role="tab"><a href="#">Action 04</a></li>
        </ul>
      </article>
    </section>
  </section>

  <!--···························· Toolbars ····························-->
  <section id="toolbars" data-position="right">
     <section role="region">
      <header class="fixed">
        <a id="btn-toolbars-back" href="#"><span class="icon icon-back">back</span></a>
        <h1>Toolbars</h1>
      </header>
      <article class="content scrollable header">
        <div role="toolbar">
          <ul>
            <li><button class="action-icon delete">Delete</button></li>
          </ul>
          <ul>
            <li><button class="action-icon email-flag">Flag</button></li>
            <li><button class="action-icon email-markread">Mark read</button></li>
            <li><button class="action-icon email-send">Send</button></li>
            <li><button class="action-icon email-share">Share</button></li>
          </ul>
        </div>
      </article>
    </section>
  </section>


  <script type="text/javascript" defer src="js/status.js"></script>
  <script type="text/javascript" defer src="js/seekbars.js"></script>
  <script type="text/javascript" defer src="js/app.js"></script>

  <script>
    /*var mobile = (navigator.userAgent.search("Mobile") != -1);
    if ( mobile ) {
      //Let's reduce font-size when in landscape  
      //fs: current font-size
      var fs = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue( 'font-size' ), 10);
      var mql = window.matchMedia("(orientation: portrait)");

      if(mql.matches) { //portrait
        document.documentElement.style.fontSize = fs + 'px';
        document.body.classList.remove('landscape');
      } else { // landscape
        document.documentElement.style.fontSize = fs * 0.7 + 'px';
        document.body.classList.add('landscape');
      }

      mql.addListener(function(m) {
        if(m.matches) { //portrait
          document.documentElement.style.fontSize = fs + 'px';
          document.body.classList.remove('landscape');
        }
        else { //landscape
          document.documentElement.style.fontSize = fs * 0.7 + 'px';
          document.body.classList.add('landscape');
        }
      });
    }*/
  </script>
</body>
</html>

